<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
    <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
    <text class="title">我收藏的房源</text>
  </view>

  <view v-if="lackFlag">
    <view class="screen">
      <view class="screenItem" @tap="selectItemType('新房')">
        <text class="screen-text">新房</text>
        <text class="line" :class="{ active: selectedType === '新房' }"></text>
      </view>
      <view class="screenItem" @tap="selectItemType('二手房')">
        <text class="screen-text">二手房</text>
        <text class="line" :class="{ active: selectedType === '二手房' }"></text>
      </view>
      <view class="screenItem">
        <text class="screen-text" @tap="selectItemType('租房')">租房</text>
        <text class="line" :class="{ active: selectedType === '租房' }"></text>
      </view>
    </view>
    <view class="content" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
      <view class="contentItem">
        <image
          :src="item.images && item.images.length ? item.images[0] : defaultImage"
          class="contentItemImg"
        />
        <view class="description">
          <p class="desTitle">{{ item.name }}</p>
          <p>
            <span class="houseTag">{{ item.area }}㎡</span>
            <span class="houseTag">{{ item.asaga }}</span>
            <span class="houseTag">{{ item.location }}</span>
          </p>
          <p>
            <span class="allPrice">{{ item.price + '元/月' }}</span>
          </p>
          <p>
            <span class="houseLabel" v-for="(item, index) in item.tags" :key="index">{{
              item
            }}</span>
          </p>
        </view>
      </view>
    </view>
    <open-program></open-program>
  </view>
  <view class="lackDataWrapper" v-else>
    <view class="lackItem">
      <image src="/static/images/lackData.png" class="lackImg" />
      <text class="lackTitle">暂无数据</text>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import OpenProgram from '../components/openProgram.vue'
import { computed } from 'vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import {
  getCollectNewHouseAPI,
  getCollectSecondHouseAPI,
  getCollectRentHouseAPI,
} from '@/services/myCollectHouse'
const selectedType = ref('新房')
// 处理点击事件的方法，更新selectedType
const selectItemType = (type) => {
  selectedType.value = type
  fetchData(type) // 根据类型发起请求
}
const list = ref()
const userId = ref()
userId.value = JSON.parse(uni.getStorageSync('appIdKey'))
const flag = ref(0) //默认是新房0   二手房1   租房2
const fetchData = async (type) => {
  try {
    // 根据不同的类型发起不同的请求
    switch (type) {
      case '新房':
        console.log('这是新房')
        const newHouseRes = await getCollectNewHouseAPI({
          pageNo: 1,
          pageSize: 5,
          type: 0,
          userId: userId.value,
        })
        list.value = newHouseRes.data.list
        flag.value = 0
        break
      case '二手房':
        console.log('这是二手房')
        const secondHouseRes = await getCollectSecondHouseAPI({
          pageNo: 1,
          pageSize: 5,
          type: 1,
          userId: userId.value,
        })
        list.value = secondHouseRes.data.list
        flag.value = 1
        break
      case '租房':
        console.log('这是租房')
        const rentHouseRes = await getCollectRentHouseAPI({
          pageNo: 1,
          pageSize: 5,
          type: 2,
          userId: userId.value,
        })
        list.value = rentHouseRes.data.list
        flag.value = 2
        break
      default:
        console.log('未知类型')
    }
  } catch (error) {
    console.error('数据请求错误:', error)
  }
}
const menu = ref({})
const lackFlag = ref(true)
const label = ref(['近地铁', '新上', '精装修'])
const tag = ref(['86.02㎡', '南', '浦口', '桥北'])
onMounted(() => {
  menu.value = uni.getMenuButtonBoundingClientRect()
  console.log(menu.value)
})

const goBack = () => {
  uni.navigateBack()
}
const detail = () => {
  uni.navigateTo({
    url: `/pages/simplePage/informationDetail`, // 假设detail页面需要id参数
  })
}

// // 新房收藏数据请求
const getNewHousePage = async () => {
  const res = await getCollectNewHouseAPI({
    pageNo: 1,
    pageSize: 5,
    type: 0,
    userId: userId.value,
  })
  list.value = res.data.list
  flag.value = 0
  console.log('看一下flag的值》》', flag.value)
}
//二手房收藏数据请求
const getSecondHousePage = async () => {
  console.log('二手房！！！1函数走这里了嘛')
  const res = await getCollectSecondHouseAPI({
    pageNo: 1,
    pageSize: 5,
    type: 1,
    userId: userId.value,
  })
  list.value = res.data.list
  flag.value = 1
}
//租房收藏数据请求
const getRentHousePage = async () => {
  const res = await getCollectRentHouseAPI({
    pageNo: 1,
    pageSize: 5,
    type: 2,
    userId: userId.value,
  })
  list.value = res.data.list
  flag.value = 2
  console.log('打印一下函数的flag值', flag.value)
}
onLoad(async () => {
  const rentHouseRes = await getCollectRentHouseAPI({
    pageNo: 1,
    pageSize: 5,
    type: 2,
    userId: userId.value,
  })
  const secondHouseRes = await getCollectSecondHouseAPI({
    pageNo: 1,
    pageSize: 5,
    type: 1,
    userId: userId.value,
  })
  const newHouseRes = await getCollectNewHouseAPI({
    pageNo: 1,
    pageSize: 5,
    type: 0,
    userId: userId.value,
  })
  // 如果收藏房源为空，lackFlag = false
  if (
    rentHouseRes.data.total == 0 &&
    secondHouseRes.data.total == 0 &&
    newHouseRes.data.total == 0
  ) {
    lackFlag.value = false
  }
  getNewHousePage()
})

//uniapp微信小程序分享页面到微信好友
onShareAppMessage(() => {})
//uniapp微信小程序分享页面到微信朋友圈

onShareTimeline(() => {})
//点击进入详情页面
const goDetail = (id) => {
  if (flag.value === 0) {
    console.log('flag的值是0')
    //新房
    uni.navigateTo({
      url: `/pages/simplePage/newHouseDetail?id=${id}`,
    })
  } else if (flag.value === 1) {
    console.log('flag的值是1')
    //新房标志
    uni.navigateTo({
      url: `/pages/simplePage/secondHandDetail?id=${id}`,
    })
  } else if (flag.value === 2) {
    console.log('flag的值是2')
    //租房标志
    uni.navigateTo({
      url: `/pages/simplePage/rentHouseDetail?id=${id}`,
    })
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f4f5fc;
}
.scroll-view {
  flex: 1;
}
.lackDataWrapper {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 100%;
  background-color: #fff;
  .lackItem {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .lackImg {
      width: 179rpx;
      height: 196rpx;
    }
    .lackTitle {
      width: 100%;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #000000;
    }
  }
}
.navbar {
  margin-top: 8rpx;
  background-color: #fff;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;

  .goBack {
    position: absolute;
    width: 18rpx;
    height: 30rpx;
    margin-left: 56rpx;
    margin-top: 7rpx;
  }

  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.search {
  display: flex;
  align-items: center;
  width: 695rpx;
  height: 70rpx;
  background: #f3f5fa;
  border-radius: 35rpx;
  margin-top: 37rpx;
  margin-left: 27rpx;

  .searchImg {
    width: 28rpx;
    height: 28rpx;
    margin-left: 25rpx;
    margin-right: 8rpx;
  }

  .input {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
  }
}

.screen {
  position: relative;
  display: flex;
  width: 100%;
  padding-top: 43rpx;
  padding-bottom: 34rpx;
  background-color: #fff;
}

.screenItem {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen-text {
  font-family: PingFang SC;
  font-weight: 550;
  font-size: 26rpx;
  color: #000000;
}

.line {
  position: absolute;
  bottom: 0;
  width: 27rpx;
  height: 0rpx;
  background: #16c686;
  border-radius: 2rpx;
}
.line.active {
  /* 选中时的下划线样式，例如实线、颜色改变等 */
  //   border-bottom: 1px solid #000; /* 示例：实线，黑色 */
  height: 4rpx;
}
.market {
  width: 10rpx;
  height: 6rpx;
  margin-left: 6rpx;
}

.content {
  display: flex;
  width: 750rpx;
  height: auto;
  background-color: #f4f5fc;
}

.contentItem {
  flex: 1;
  display: flex;
  align-items: center;
  width: 695rpx;
  height: 230rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-left: 27rpx;
  margin-right: 27rpx;
  margin-top: 24rpx;

  .houseLabel {
    width: auto;
    height: 31rpx;
    background: #f3f4fa;
    border-radius: 3rpx;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #687a8c;
    padding: 6rpx 11rpx;
    margin-right: 9rpx;
  }

  .contentItemImg {
    width: 210rpx;
    height: 155rpx;
    background: #000000;
    border-radius: 5rpx;
    margin-left: 26rpx;
    margin-right: 21rpx;
  }
}

.desTitle {
  width: 410rpx;
  font-family: PingFang SC;
  font-weight: 550;
  font-size: 30rpx;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.allPrice {
  font-family: PingFang SC;
  font-weight: 600;
  font-size: 30rpx;
  color: #e75841;
  margin-right: 14rpx;
}

.avgPrice {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #989b9e;
}

.houseTag {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #020609;
  margin-right: 20rpx;
}
</style>
